<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title> 注册 </title>
    <link rel="stylesheet" href="style/css/base.css"/>
    <link rel="stylesheet" href="style/css/login.css"/>

    <script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>


    <!-- 验证码 -->
    <style>
        .verify {
            width: 95px;
            position: absolute;
            right: 0;
            top: 0px;
            cursor: pointer;
            height: 46px;
            font-size: 14px;
            text-align: center;
            line-height: 46px;
            background-color: rgb(50, 165, 231);
            color: black;
        }

        ::-webkit-scrollbar {
            display: none;
        }
    </style>


</head>
<body>
<div id="content" class="content">


    <div class="banner-box">
        <form id="mainForm" class="main-form" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
            <div class="tab-title">
                <a class="linkAGray" id="toAccountLogin" href="../login.html">账号登录</a>
                <span class="register-line"></span>
                <a class="linkABlue" id="toVCodeLogin" href="register.html">账号注册</a>
            </div>

            <div id="errorMsg" class="tip-box visiblility-hidden">
                <i class="err-ico"></i>
                <span class="tip-font" id="tipMsg">请填写完整的注册信息</span>
                <span id="closeErrorMsg" class="close-ico"></span>
            </div>


            <div class="normalInput cycode-box fieldInput" id="cycode-box">
                <div class="cycode-selectbox">
                    <input class="ipt-account inp-focus" name="email" id="email" maxlength="50" placeholder="邮箱"
                           autocomplete="off" onfocus="closeErrorMsg()"/>

                </div>
            </div>
            <div class="normalInput fieldInput">
                <input type="text" class="inp-focus" name="Verificationcode" id="Verificationcode" maxlength="16"
                       autocomplete="off" placeholder="验证码" onfocus="closeErrorMsg()"/>
                <span id="verifyCode" class="verify" onclick="sendsms(this);">获取验证码</span>
            </div>


            <a id="register" class="fullBtnBlue">注册</a>


        </form>


    </div>
</div>


<script>
    //点击注册事件
    $("#register").click(function () {
        var email = $("#email").val();
        var Verificationcode = $("#Verificationcode").val(); //输入的验证码

        if (email == "" || Verificationcode == "") {
            var obj = document.getElementById("errorMsg");
            $("#tipMsg").html("请填写完整的注册信息！");
            obj.setAttribute("class", "tip-box visiblility-show");
            return;
        }
        //邮箱校验
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var t = email.match(reg);
        if (t == null) {
            //提示错误信息
            var obj = document.getElementById("errorMsg");
            //修改提示文字
            $("#tipMsg").html("请填写正确的邮箱！");
            obj.setAttribute("class", "tip-box visiblility-show");
            return;
        }
        //发送ajax请求


    });

    //点击错误信息关闭按钮
    $("#closeErrorMsg").click(function () {
        var obj = document.getElementById("errorMsg");
        obj.setAttribute("class", "tip-box visiblility-hidden");
    });


    //关闭错误提示
    function closeErrorMsg() {
        var obj = document.getElementById("errorMsg");
        obj.setAttribute("class", "tip-box visiblility-hidden");
    }


    //发送验证码函数
    function sendsms(e) {
        var email = $("#email").val();
        if (email == "") {
            //提示错误信息
            var obj = document.getElementById("errorMsg");
            //修改提示文字
            $("#tipMsg").html("请填写正确的邮箱！");
            obj.setAttribute("class", "tip-box visiblility-show");
            return;
        }
        //邮箱校验
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var t = email.match(reg);
        if (t == null) {
            //提示错误信息
            var obj = document.getElementById("errorMsg");
            //修改提示文字
            $("#tipMsg").html("请填写正确的邮箱！");
            obj.setAttribute("class", "tip-box visiblility-show");
            return;
        }


        //发送ajax请求，后台发送邮件
        $.ajax({
            type: 'POST',
            url: 'register.action',
            data: 'email=' + email
        });


        /*发送验证码功能*/
        countdown(e);     //若发送验证码成功，则调用倒计时函数
    }

    //倒计时函数
    var time = 5;

    function countdown(e) {
        if (time == 0) {
            e.setAttribute("onclick", "sendsms(this)");
            $("#verifyCode").html("获取验证码");
            //颜色恢复
            var mychar = document.getElementById("verifyCode");
            mychar.style.backgroundColor = "rgb(50,165,231)";
            time = 5;
        } else {
            //设置背景为灰色
            var mychar = document.getElementById("verifyCode");
            mychar.style.backgroundColor = "rgb(169,169,169)";

            e.removeAttribute("onclick");
            $("#verifyCode").html("重新发送(" + time + ")");
            time--;
            setTimeout(function () {
                countdown(e)
            }, 1000)
        }
    }


</script>
</body>
</html>